<template>
  <v-app-bar app height="80">
    <!-- -->
    <v-app-bar-nav-icon @click.stop="$emit('unDrawer')"></v-app-bar-nav-icon>

    <v-toolbar-title>Collapsing Bar</v-toolbar-title>

    <v-spacer></v-spacer>

    <v-text-field label="Search"
                  hide-details
                  style="max-width: 175px">
      <v-btn slot="append-outer"
             elevation="1"
             class="mt-n2"
             icon small fab>
        <v-icon>
          mdi-magnify
        </v-icon>
      </v-btn>
    </v-text-field>

    <div class="mx-3"/>

    <v-btn class="ml-1"
           min-width="0"
           text>
      <v-badge overlap content="6" color="pink" :value="false">
        <v-icon>
          mdi-bell
        </v-icon>
      </v-badge>
    </v-btn>

    <v-btn min-width="0" class="ml-1"
           text>
      <v-icon>
        mdi-account
      </v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
export default {
  name: "AppBar"
}
</script>

<style scoped>

</style>